<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">

  <!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800">

  <!-- Use title if it's in the page YAML frontmatter -->
  <title>Core Admin Theme</title>

  <link href="../../stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />

  <!--[if lt IE 9]>
  <script src="../../javascripts/vendor/html5shiv.js" type="text/javascript"></script>
  <script src="../../javascripts/vendor/excanvas.js" type="text/javascript"></script>
  <![endif]-->

  <script src="../../javascripts/application.js" type="text/javascript"></script>
</head>



<body>
<div class="navbar navbar-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">

      <a class="brand" href="#">Core Admin</a>

      <!-- the new toggle buttons -->

      <ul class="nav pull-right">

        <li class="toggle-primary-sidebar hidden-desktop" data-toggle="collapse" data-target=".nav-collapse-primary"><button type="button" class="btn btn-navbar"><i class="icon-th-list"></i></button></li>

        <li class="hidden-desktop" data-toggle="collapse" data-target=".nav-collapse-top"><button type="button" class="btn btn-navbar"><i class="icon-align-justify"></i></button></li>

      </ul>

      
          

          <div class="nav-collapse nav-collapse-top collapse">

            <ul class="nav full pull-right">
              <li class="dropdown user-avatar">

                <!-- the dropdown has a custom user-avatar class, this is the small avatar with the badge -->

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span>
                    <img class="menu-avatar" src="../../images/avatars/avatar1.jpg" /> <span>John Smith <i class="icon-caret-down"></i></span>
                    <span class="badge badge-dark-red">5</span>
                  </span>
                </a>

                <ul class="dropdown-menu">

                  <!-- the first element is the one with the big avatar, add a with-image class to it -->

                  <li class="with-image">
                    <div class="avatar">
                      <img src="../../images/avatars/avatar1.jpg" />
                    </div>
                    <span>John Smith</span>
                  </li>

                  <li class="divider"></li>

                  <li><a href="#"><i class="icon-user"></i> <span>Profile</span></a></li>
                  <li><a href="#"><i class="icon-cog"></i> <span>Settings</span></a></li>
                  <li><a href="#"><i class="icon-envelope"></i> <span>Messages</span> <span class="label label-dark-red pull-right">5</span></a></li>
                  <li><a href="#"><i class="icon-off"></i> <span>Logout</span></a></li>
                </ul>
              </li>
            </ul>

            <form class="navbar-search pull-right">
              <input type="text" class="search-query animated" placeholder="Search">
              <i class="icon-search"></i>
            </form>

            <ul class="nav pull-right">
              <li class="active"><a href="#" title="Go home"><i class="icon-home"></i> Home</a></li>
              <li><a href="#" title="Manage users"><i class="icon-user"></i> Users</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Some link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>


            </ul>

          </div>
      

    </div>
  </div>
</div>
<div class="sidebar-background">
  <div class="primary-sidebar-background"></div>
</div>

<div class="primary-sidebar">

  <!-- Main nav -->
  <ul class="hide-dropdown-sidebar nav nav-collapse collapse nav-collapse-primary">
    
    

        <li class="">
          <span class="glow"></span>
          <a href="../dashboard/dashboard.html">
              <i class="icon-dashboard icon-2x"></i>
              <span>Dashboard</span>
          </a>
        </li>

    


    

        <li class="dark-nav active">

          <span class="glow"></span>

          

          <a class="accordion-toggle  " data-toggle="collapse" href="#rbFQyNsKW7">
              <i class="icon-beaker icon-2x"></i>
                    <span>
                      UI Lab
                      <i class="icon-caret-down"></i>
                    </span>

          </a>

          <ul id="rbFQyNsKW7" class="collapse in">
            
                <li class="">
                  <a href="buttons.html">
                      <i class="icon-hand-up"></i> Buttons
                  </a>
                </li>
            
                <li class="">
                  <a href="general.html">
                      <i class="icon-beaker"></i> General elements
                  </a>
                </li>
            
                <li class="">
                  <a href="icons.html">
                      <i class="icon-info-sign"></i> Icons
                  </a>
                </li>
            
                <li class="">
                  <a href="grid.html">
                      <i class="icon-th-large"></i> Grid
                  </a>
                </li>
            
                <li class="">
                  <a href="tables.html">
                      <i class="icon-table"></i> Tables
                  </a>
                </li>
            
                <li class="active">
                  <a href="widgets.html">
                      <i class="icon-plus-sign-alt"></i> Widgets
                  </a>
                </li>
            
          </ul>

        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../forms/forms.html">
              <i class="icon-edit icon-2x"></i>
              <span>Forms</span>
          </a>
        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../charts/charts.html">
              <i class="icon-bar-chart icon-2x"></i>
              <span>Charts</span>
          </a>
        </li>

    


    

        <li class="dark-nav ">

          <span class="glow"></span>

          

          <a class="accordion-toggle collapsed " data-toggle="collapse" href="#eR66eArngS">
              <i class="icon-link icon-2x"></i>
                    <span>
                      Others
                      <i class="icon-caret-down"></i>
                    </span>

          </a>

          <ul id="eR66eArngS" class="collapse ">
            
                <li class="">
                  <a href="../other/wizard.html">
                      <i class="icon-magic"></i> Wizard
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/login.html">
                      <i class="icon-user"></i> Login Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/sign_up.html">
                      <i class="icon-user"></i> Sign Up Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/full_calendar.html">
                      <i class="icon-calendar"></i> Full Calendar
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/error404.html">
                      <i class="icon-ban-circle"></i> Error 404 page
                  </a>
                </li>
            
          </ul>

        </li>

    


  </ul>

  <!-- Small main nav -->
  <ul class="hide-collapse-sidebar nav nav-collapse collapse nav-collapse-primary">
    
    

        <li class="">
          <span class="glow"></span>
          <a href="../dashboard/dashboard.html">
              <i class="icon-dashboard icon-2x"></i>
              <span>Dashboard</span>
          </a>
        </li>

    


    

        <li class="dark-nav to-right active">

          <span class="glow"></span>
          <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html">
              <i class="icon-beaker icon-2x"></i>
                    <span>
                      UI Lab
                      <i class="icon-caret-right"></i>
                    </span>

          </a>

          <ul class="dropdown-menu">
            
                <li class="">
                  <a href="buttons.html">
                      <i class="icon-hand-up"></i> Buttons
                  </a>
                </li>
            
                <li class="">
                  <a href="general.html">
                      <i class="icon-beaker"></i> General elements
                  </a>
                </li>
            
                <li class="">
                  <a href="icons.html">
                      <i class="icon-info-sign"></i> Icons
                  </a>
                </li>
            
                <li class="">
                  <a href="grid.html">
                      <i class="icon-th-large"></i> Grid
                  </a>
                </li>
            
                <li class="">
                  <a href="tables.html">
                      <i class="icon-table"></i> Tables
                  </a>
                </li>
            
                <li class="active">
                  <a href="widgets.html">
                      <i class="icon-plus-sign-alt"></i> Widgets
                  </a>
                </li>
            
          </ul>

        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../forms/forms.html">
              <i class="icon-edit icon-2x"></i>
              <span>Forms</span>
          </a>
        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../charts/charts.html">
              <i class="icon-bar-chart icon-2x"></i>
              <span>Charts</span>
          </a>
        </li>

    


    

        <li class="dark-nav to-right ">

          <span class="glow"></span>
          <a class="dropdown-toggle" data-toggle="dropdown" href="../other/wizard.html">
              <i class="icon-link icon-2x"></i>
                    <span>
                      Others
                      <i class="icon-caret-right"></i>
                    </span>

          </a>

          <ul class="dropdown-menu">
            
                <li class="">
                  <a href="../other/wizard.html">
                      <i class="icon-magic"></i> Wizard
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/login.html">
                      <i class="icon-user"></i> Login Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/sign_up.html">
                      <i class="icon-user"></i> Sign Up Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/full_calendar.html">
                      <i class="icon-calendar"></i> Full Calendar
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/error404.html">
                      <i class="icon-ban-circle"></i> Error 404 page
                  </a>
                </li>
            
          </ul>

        </li>

    


  </ul>

  <div class="hide-dropdown-sidebar hidden-tablet hidden-phone">
    <div class="text-center" style="margin-top: 60px">
      <div class="easy-pie-chart-percent" style="display: inline-block" data-percent="89"><span>89%</span></div>
      <div style="padding-top: 20px"><b>CPU Usage</b></div>
    </div>

    <hr class="divider" style="margin-top: 60px">

    <div class="sparkline-box side">

      <div class="sparkline-row">
        <h4 class="gray"><span>Orders</span> 847</h4>
        <div class="sparkline big" data-color="gray"><!--6,3,22,7,23,28,13,10,17,26,28,27--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="dark-green"><span>Income</span> $43.330</h4>
        <div class="sparkline big" data-color="darkGreen"><!--4,16,25,4,9,21,11,21,19,7,26,29--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="blue"><span>Reviews</span> 223</h4>
        <div class="sparkline big" data-color="blue"><!--14,20,6,21,11,6,8,29,27,22,9,3--></div>
      </div>

      <hr class="divider">
    </div>
  </div>


</div>
<div class="main-content">
  <div class="container-fluid">
    <div class="row-fluid">

      <div class="area-top clearfix">
        <div class="pull-left header">
          <h3 class="title">
            <i class="icon-plus-sign-alt"></i>
            Widgets
          </h3>
          <h5>
            <span class="hidden-tablet hidden-phone">
              Click <a href="#" id="switch-sidebar">here</a> for a different sidebar
            </span>
            <span class="hidden-desktop">
              A subtitle can go here
            </span>
          </h5>
        </div>

        <ul class="inline pull-right sparkline-box">

          <li class="sparkline-row">
            <h4 class="blue"><span>Orders</span> 847</h4>
            <div class="sparkline big" data-color="blue"><!--23,21,23,21,18,5,21,28,10,10,12,16--></div>
          </li>

          <li class="sparkline-row">
            <h4 class="green"><span>Reviews</span> 223</h4>
            <div class="sparkline big" data-color="green"><!--26,22,14,11,22,16,5,15,5,5,24,15--></div>
          </li>

          <li class="sparkline-row">
            <h4 class="red"><span>New visits</span> 7930</h4>
            <div class="sparkline big"><!--8,8,10,5,17,10,26,15,27,21,5,19--></div>
          </li>

        </ul>
      </div>
    </div>
  </div>

  <div class="container-fluid padded">
    <div class="row-fluid">

      <!-- Breadcrumb line -->

      <div id="breadcrumbs">
        <div class="breadcrumb-button blue">
          <span class="breadcrumb-label"><i class="icon-home"></i> Home</span>
          <span class="breadcrumb-arrow"><span></span></span>
        </div>

        
            <div class="breadcrumb-button">
              <span class="breadcrumb-label">
                <i class="icon-beaker"></i> UI Lab
              </span>
              <span class="breadcrumb-arrow"><span></span></span>
            </div>
        

        <div class="breadcrumb-button">
          <span class="breadcrumb-label">
            <i class="icon-plus-sign-alt"></i> Widgets
          </span>
          <span class="breadcrumb-arrow"><span></span></span>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid padded">
    <!-- find me in partials/action_nav_normal_one_row -->

<!--big normal buttons-->
<div class="action-nav-normal">

  <div class="row-fluid">
    <div class="span2 action-nav-button">
      <a href="#" title="New Project">
        <i class="icon-file-alt"></i>
        <span>New Project</span>
      </a>
      <span class="triangle-button red"><i class="icon-plus"></i></span>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Messages">
        <i class="icon-comments-alt"></i>
        <span>Messages</span>
      </a>
      <span class="label label-black">14</span>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Files">
        <i class="icon-folder-open-alt"></i>
        <span>Files</span>
      </a>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Users">
        <i class="icon-user"></i>
        <span>Users</span>
      </a>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Friends">
        <i class="icon-facebook-sign"></i>
        <span>Friends</span>
      </a>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Followers">
        <i class="icon-twitter"></i>
        <span>Followers</span>
      </a>
    </div>
  </div>

</div>
<div class="divider"><span></span></div>

<div class="row-fluid">
  <div class="span12">
    
<ul class="chat-box timeline">

  <li class="arrow-box-left gray">
    <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar1.jpg" /></div>
    <div class="info">
      <span class="name">
        <span class="label label-green">COMMENT</span> <strong class="indent">John</strong> posted a comment on this task: <strong>Core Admin</strong>
      </span>
      <span class="time"><i class="icon-time"></i> 3 minutes ago</span>
    </div>
    <div class="content">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <div>
        <a href="#"><i class="icon-paper-clip"></i> <b>project_news.docx</b></a>
      </div>
    </div>
  </li>

  <li class="arrow-box-left gray">
    <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar2.jpg" /></div>
    <div class="info">
      <span class="name">
        <span class="label label-blue">TASK</span> <strong class="indent">Janine</strong> completed this task: <strong class="strikethrough">Core Admin</strong>
      </span>
      <span class="time"><i class="icon-time"></i> 6 minutes ago</span>
    </div>
  </li>

  <li class="arrow-box-left gray">
    <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar3.jpg" /></div>
    <div class="info">
      <span class="name">
        <span class="label label-purple">FILE</span> <strong class="indent">John</strong> added 3 new files in project: <strong>Core Admin</strong>
      </span>
      <span class="time"><i class="icon-time"></i> 12 minutes ago</span>
    </div>
    <div class="content">
      <ul class="thumbnails padded">
        
            <li class="span3">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/240x100" alt="">
              </a>
            </li>
        
            <li class="span3">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/240x100" alt="">
              </a>
            </li>
        
            <li class="span3">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/240x100" alt="">
              </a>
            </li>
        
      </ul>
    </div>
  </li>
</ul>

<div class="box closable-chat-box">
  <div class="box-content padded">

    <div class="fields">
      <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar2.jpg" /></div>
      <ul>
        <li><b>Add a comment for project <a href="#">Core Admin</a></b></li>
        <li class="note">Click on the textarea below to expand it!</li>
      </ul>
    </div>

    <form class="fill-up" action="/">

      <div class="chat-message-box">
        <textarea name="ttt" id="ttt" rows="5" placeholder="add a comment (click to expand!)"></textarea>
      </div>

      <div class="clearfix actions">
        <span class="note">An optional note can go here</span>
        <div class="pull-right faded-toolbar">
          <a href="#" class="tip" title="Attach files"><i class="icon-paper-clip"></i></a>
          <a href="#" class="btn btn-blue btn-mini">Send</a>
        </div>
      </div>
    </form>

  </div>
</div>
  </div>
</div>


<div class="divider"><span></span></div>

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">News with icons (scrollable!)</span>
        <ul class="box-toolbar">
          <li><span class="label label-green">51</span></li>
        </ul>
      </div>
      <div class="box-content scrollable" style="height: 410px; overflow-y: auto">
        
            <!-- find me in partials/news_with_icons -->

<div class="box-section news with-icons">
  <div class="avatar blue"><i class="icon-ok icon-2x"></i></div>
  <div class="news-time">
    <span>06</span> jan
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Twitter Bootstrap v3.0 is coming!</a></div>
    <div class="news-text">
      With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project ...
    </div>
  </div>
</div>

<div class="box-section news with-icons">
  <div class="avatar green"><i class="icon-lightbulb icon-2x"></i></div>
  <div class="news-time">
    <span>11</span> feb
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Ruby on Rails 4.0</a></div>
    <div class="news-text">
      Rails 4.0 is still unfinished, but it is shaping up to become a great release ...
    </div>
  </div>
</div>

<div class="box-section news with-icons">
  <div class="avatar purple"><i class="icon-mobile-phone icon-2x"></i></div>
  <div class="news-time">
    <span>04</span> mar
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">All about SCSS</a></div>
    <div class="news-text">
      Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules ...
    </div>
  </div>
</div>


    <div class="box-section news with-icons">
      <div class="avatar cyan"><i class="icon-ok icon-2x"></i></div>
      <div class="news-time">
        <span>22</span> dec
      </div>
      <div class="news-content">
        <div class="news-title"><a href="#">Twitter Bootstrap v3.0 is coming!</a></div>
        <div class="news-text">
          With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project ...
        </div>
      </div>
    </div>


        
            <!-- find me in partials/news_with_icons -->

<div class="box-section news with-icons">
  <div class="avatar blue"><i class="icon-ok icon-2x"></i></div>
  <div class="news-time">
    <span>06</span> jan
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Twitter Bootstrap v3.0 is coming!</a></div>
    <div class="news-text">
      With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project ...
    </div>
  </div>
</div>

<div class="box-section news with-icons">
  <div class="avatar green"><i class="icon-lightbulb icon-2x"></i></div>
  <div class="news-time">
    <span>11</span> feb
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Ruby on Rails 4.0</a></div>
    <div class="news-text">
      Rails 4.0 is still unfinished, but it is shaping up to become a great release ...
    </div>
  </div>
</div>

<div class="box-section news with-icons">
  <div class="avatar purple"><i class="icon-mobile-phone icon-2x"></i></div>
  <div class="news-time">
    <span>04</span> mar
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">All about SCSS</a></div>
    <div class="news-text">
      Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules ...
    </div>
  </div>
</div>


    <div class="box-section news with-icons">
      <div class="avatar cyan"><i class="icon-ok icon-2x"></i></div>
      <div class="news-time">
        <span>22</span> dec
      </div>
      <div class="news-content">
        <div class="news-title"><a href="#">Twitter Bootstrap v3.0 is coming!</a></div>
        <div class="news-text">
          With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project ...
        </div>
      </div>
    </div>


        
      </div>
    </div>
  </div>

  <div class="span6">
    <div class="input-prepend">
      <a class="add-on" href="#">
        <i class="icon-search"></i>
      </a>
      <input type="text" placeholder="Search... (prepended)">
    </div>

    <div class="search-dropdown box" >
      <!-- find me in partials/news_with_avatars -->

<div class="box-section news">
  <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar2.jpg" /></div>
  <div class="news-time">
    <span>06</span> jan
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Twitter Bootstrap v3.0 is coming!</a></div>
    <div class="news-text">
      With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project ...
    </div>
  </div>
</div>

<div class="box-section news">
  <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar3.jpg" /></div>
  <div class="news-time">
    <span>11</span> feb
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Ruby on Rails 4.0</a></div>
    <div class="news-text">
      Rails 4.0 is still unfinished, but it is shaping up to become a great release ...
    </div>
  </div>
</div>

<div class="box-section news">
  <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar2.jpg" /></div>
  <div class="news-time">
    <span>04</span> mar
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">All about SCSS</a></div>
    <div class="news-text">
      Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules ...
    </div>
  </div>
</div>

<div class="box-section news">
  <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar3.jpg" /></div>
  <div class="news-time">
    <span>06</span> jan
  </div>
  <div class="news-content">
    <div class="news-title"><a href="#">Twitter Bootstrap v3.0 is coming!</a></div>
    <div class="news-text">
      With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project ...
    </div>
  </div>
</div>
      <div class="box-footer flat">
  <div class="pagination pagination-centered pagination-mini">
    <ul>
      <li><a href="#">Prev</a></li>
      <li><a href="#">1</a></li>
      <li class="active"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">Next</a></li>
    </ul>
  </div>
</div>
    </div>
  </div>

</div>


<div class="row-fluid">

  <div class="span6">
    <!-- find me in partials/tasks_table -->

<div class="box">
  <div class="box-header">
    <span class="title">Here be your tasks</span>
    <ul class="box-toolbar">
      <li><span class="label label-green">2 left</span></li>
    </ul>
  </div>
  <div class="box-content">
    <table class="table table-normal">
      <thead>
      <tr>
        <td></td>
        <td>Task</td>
        <td>Done</td>
        <td style="width: 40px"></td>
      </tr>
      </thead>

      <tbody>
      <tr class="status-pending">
        <td class="icon"><i class="icon-exchange"></i></td>
        <td><a href="#">Doing the dew</a></td>
        <td><b>0%</b></td>
        <td>
          <div class="btn-group">
            <button class="btn btn-mini btn-default dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        </td>
      </tr>

      <tr class="status-info">
        <td class="icon"><i class="icon-refresh"></i></td>
        <td><a href="#">Doing some stuff</a></td>
        <td><b>14%</b></td>
        <td>
          <div class="btn-group">
            <button class="btn btn-mini btn-default dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        </td>
      </tr>

      <tr class="status-success">
        <td class="icon"><i class="icon-ok"></i></td>
        <td><a href="#">Build the prototype</a></td>
        <td><b>100%</b></td>
        <td>
          <div class="btn-group">
            <button class="btn btn-mini btn-default dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        </td>
      </tr>

      <tr class="status-info">
        <td class="icon"><i class="icon-refresh"></i></td>
        <td><a href="#">Fixing bugs</a></td>
        <td><b>28%</b></td>
        <td>
          <div class="btn-group">
            <button class="btn btn-mini btn-default dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        </td>
      </tr>


      </tbody>
    </table>
  </div>
</div>


    <!-- find me in partials/stats_table -->

<div class="box">
  <div class="box-header">
    <span class="title">Here be your stats</span>
    <ul class="box-toolbar">
      <li><span class="label label-blue">189</span></li>
    </ul>
  </div>
  <div class="box-content">
    <table class="table table-normal">
      <thead>
      <tr>
        <td></td>
        <td>Item</td>
        <td>Stats</td>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td style="width: 60px;"><div class="sparkline"><!--5,10,15,20,18,16,14,20,15,16,12,10--></div></td>
        <td style="text-align: center;"><i class="icon-user"></i> Visitors</td>
        <td class="status-error"><i class="icon-circle-arrow-down"></i> -5%</td>
      </tr>

      <tr>
        <td style="width: 60px;"><div class="sparkline" data-color="green"><!--5,6,8,14,18,10,12,16,15,16,12,15--></div></td>
        <td style="text-align: center;"><i class="icon-comments-alt"></i> Comments</td>
        <td class="status-success"><i class="icon-circle-arrow-up"></i> +10%</td>
      </tr>

      <tr>
        <td style="width: 60px;"><div class="sparkline"><!--15,16,8,14,18,10,14,16,15,16,12,10--></div></td>
        <td style="text-align: center;"><i class="icon-bell"></i> Events</td>
        <td class="status-error"><i class="icon-circle-arrow-down"></i> -15%</td>
      </tr>

      <tr>
        <td style="width: 60px;"><div class="sparkline" data-color="green"><!--8,11,12,23,14,16,12,18,15,16,12,20--></div></td>
        <td style="text-align: center;"><i class="icon-money"></i> Income</td>
        <td class="status-success"><i class="icon-circle-arrow-up"></i> +20%</td>
      </tr>

      </tbody>
    </table>


  </div>
</div>


  </div>

  <div class="span6">

    <div class="box">

      <div class="box-header">
        <ul class="nav nav-tabs nav-tabs-left">
          <li class="active"><a href="#home" data-toggle="tab"><i class="icon-home"></i></a></li>
          <li><a href="#messages" data-toggle="tab"><i class="icon-comments-alt"></i> <span>Messages</span></a></li>
          <li><a href="#settings" data-toggle="tab"><i class="icon-cog"></i> <span>Settings</span></a></li>
        </ul>

        <div class="title">Settings</div>
      </div>

      <div class="box-content">
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <ul class="box-list">

              <li>
                <span><i class="icon-user"></i> Allow user registration</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox" checked="checked" />
                </span>
              </li>

              <li>
                <span><i class="icon-money"></i> Auto accept new orders</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox"/>
                </span>
              </li>

              <li>
                <span><i class="icon-upload"></i> Allow user uploads</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox" checked="checked" />
                </span>
              </li>

              <li>
                <p class="text-center">Upload Max Size <span class="upload-max-size">40 MB</span></p>
                <div class="hpadded">
                  <div class="ranged-slider-ui step"></div>
                </div>
              </li>

            </ul>
          </div>

          <div class="tab-pane" id="messages">
            <ul class="box-list">
              <li>
                <span><i class="icon-envelope"></i> Alert incoming messages</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox" checked="checked"/>
                </span>
              </li>

              <li>
                <span><i class="icon-reply"></i> Auto Reply on leave</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox" checked="checked" />
                </span>
              </li>
            </ul>
          </div>

          <div class="tab-pane" id="settings">

            <ul class="box-list">
              <li>
                <span><i class="icon-user"></i> MOAR</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox" checked="checked" />
                </span>
              </li>

              <li>
                <span><i class="icon-money"></i> SETTINGS</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox"/>
                </span>
              </li>

              <li>
                <span><i class="icon-upload"></i> HERE</span>
                <span class="pull-right">
                  <input class="iButton-icons-tab" type="checkbox" checked="checked" />
                </span>
              </li>
            </ul>

          </div>
        </div>

        <div class="box-footer padded">
          <span class="pull-right">
            <a href="#" class="btn btn-blue btn-small">Save</a>
            <a href="#" class="btn btn-default btn-small">Cancel</a>
          </span>
        </div>
      </div>

    </div>

    <!-- find me in partials/small_chat -->

<div class="box">
  <div class="box-header">
    <div class="title">Chat box</div>
  </div>

  <div class="box-content">

    <ul class="chat-box">

      <ul class="chat-box">

        <li class="arrow-box-left">

          <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar1.jpg" /></div>
          <div class="info">
            <span class="name"><strong>Michael</strong> <span class="badge badge-blue">designer</span></span>
            <span class="time">8 minutes ago</span>
          </div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        </li>

        <li class="divider"></li>

        <li class="arrow-box-right gray">
          <div class="avatar"><img class="avatar-small" src="../../images/avatars/avatar2.jpg" /></div>
          <div class="info">
            <span class="name"><strong>Alex</strong> <span class="badge badge-gray">developer</span></span>
            <span class="time">3 minutes ago</span>
          </div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>

      </ul>

    </ul>
  </div>

  <p class="note text-center">Last message received at 14:55</p>

  <hr class="divider">

  <div class="box-footer flat padded">
    <!-- chat send message module. you can use it with or without a form/submit button or just a link -->
    <form>
      <div class="input-append">
        <input type="text" placeholder="Standard bootstrap append input here"/>
        <ul class="add-on">
          <li>
            <a href="#"><i class="icon-paper-clip"></i></a>
          </li>
          <li>
            <button class="btn btn-blue">Send</button>
          </li>
        </ul>
      </div>
    </form>
  </div>
</div>


  </div>
</div>


  </div>
</div>

</body>
</html>
